<template>
    <div class="renderConfig_user">
        <a-form :form="form" layout="vertical" class="rx-a-form-vertical">
            <a-form-item :label="i18n('form.showField','显示文本字段')">
                <a-radio-group v-decorator="['showField']">
                    <a-radio v-for="(obj,index) in userFields" :value="obj.value">
                        {{ obj.label }}
                    </a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item :label="i18n('form.renderType','头像渲染类型')">
                <div class="user-img" v-decorator="['renderType']">
                    <div class="user-img-center" v-for="obj in renderType"
                         @click="userImg(obj)"
                         :style="{'border':mdl.renderType == obj?'1px solid rgba(66, 133, 244, 1)':''}">
                        <div v-if="mdl.renderType == obj" class="user-img-Selected">
                            <my-icon type="icondui"></my-icon>
                        </div>
                        <div v-if="obj!='four'" class="user-img-icon">
                            <my-icon v-if="obj=='one'" type="iconVue3_user"></my-icon>
                            <span v-else-if="obj=='two'">张</span>
                            <span v-else style="font-size: 11px">三丰</span>
                        </div>
                        <div>张三丰</div>
                    </div>
                </div>
            </a-form-item>
            <a-form-item v-if="mdl.renderType!='four'" :label="i18n('form.backgroundType','背景类型')">
                <a-radio-group v-decorator="['backgroundType']">
                    <a-radio v-for="(obj,index) in backgroundType" @click="radioType" :value="obj.value">
                        {{ obj.label }}
                    </a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item v-if="mdl.renderType!='four'" :label="i18n('form.backgroundColor','背景颜色')">
                <div class="user-back" v-if="mdl.backgroundType=='system'">
                    <div v-for="(itme,index) in backgroundList" v-decorator="['background']" :key="index"
                         :style="{'background':itme}"
                         @click="backgroundClick(itme)" class="user-back-common">
                        <my-icon v-if="mdl.background==itme" type="icondui"></my-icon>
                    </div>
                </div>
                <div v-else>
                    <a-input style="width: 100px" v-model="mdl.background" v-decorator="['background']" type="color"/>
                </div>
            </a-form-item>
            <a-form-item v-if="mdl.renderType!='four'" :label="i18n('form.defaultIcon','默认图标')">
                <div class="user-icon" :style="{'background':mdl.background}">
                    <my-icon v-if="mdl.renderType=='one'" type="iconVue3_user"></my-icon>
                    <span v-else-if="mdl.renderType=='two'">张</span>
                    <span v-else style="font-size: 15px;font-weight: bold">三丰</span>
                </div>
            </a-form-item>
            <a-form-item :label="i18n('form.tooltip','Tooltip提示文本')">
                <a-checkbox-group v-decorator="['tooltip']">
                    <a-checkbox v-for="obj in tooltipList" :value="obj.value">
                        {{ obj.label }}
                    </a-checkbox>
                </a-checkbox-group>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
export default {
    name: "renderConfig_user",
    props: ["layerid", "destroy"],
    data() {
        return {
            renderType: ['one', 'two', 'three', 'four'],
            backgroundType: [{
                value: 'system',
                label: this.i18n('form.system', '系统'),
            }, {
                value: 'custom',
                label: this.i18n('form.custom', '自定义')
            }],
            backgroundList: ['#1890FF', '#4285F4', '#2A48FF', '#01DE96', '#0FC6C2', '#7BC616', '#00B42A', '#EB0AA4', '#B71DE8', '#7816FF', '#FFB400', '#FF7D00', '#FF794F', '#F53F3F'],
            radioStyle: 'block',
            form: this.$form.createForm(this),
            mdl: {},
            userFields: [
                {value: 'fullName', label: this.i18n('form.name', '姓名')},
                {
                    value: 'fullNameUserNo',
                    label: this.i18n('form.name', '姓名') + '(' + this.i18n('form.account', '账号') + ')'
                },
                {
                    value: 'fullNameUserIdDepartment',
                    label: this.i18n('form.name', '姓名') + '(' + this.i18n('form.IDAndName', '用户ID/部门名') + ')'
                },
                // {value: 'custom', label: '自定义'},
            ],
            tooltipList: [
                {value: 'fullName', label: this.i18n('tooltipList.fullName', '姓名')},
                {value: 'userID', label: this.i18n('tooltipList.userID', '用户ID')},
                {value: 'userNo', label: this.i18n('tooltipList.userNo', '账号')},
                {value: 'phone', label: this.i18n('tooltipList.phone', '手机')},
                {value: 'mailbox', label: this.i18n('tooltipList.mailbox', '邮箱')},
                {value: 'department', label: this.i18n('tooltipList.departmentName', '部门名')},
                {value: 'departmentWhole', label: this.i18n('tooltipList.departmentWhole', '部门全路径名')},
            ]
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCellRender", key);
        },
        setData(data, fieldDts) {
            if (data.otherFields) {
                data.otherFields = data.otherFields.split(",");
            }
            this.mdl = data;
            this.mdl.showField = this.mdl.showField ? this.mdl.showField : 'fullName'//选中姓名,
            this.mdl.renderType = this.mdl.renderType ? this.mdl.renderType : 'one'//渲染风格
            this.mdl.backgroundType = this.mdl.backgroundType ? this.mdl.backgroundType : 'system'
            this.mdl.background = this.mdl.background ? this.mdl.background : '#4285F4'
            this.form.setFieldsValue(this.mdl);
        },
        radioType(e) {
            this.mdl.backgroundType = e.target.value
        },
        validate(callback) {
            var self = this;
            this.form.validateFields((err, values) => {
                if (err) {
                    return;
                }
                self.mdl = values;
                callback();
            });
        },
        backgroundClick(e) {
            this.mdl.background = e;
            this.form.setFieldsValue(this.mdl);
        },
        userImg(e) {
            this.mdl.renderType = e;
            this.form.setFieldsValue(this.mdl);
        },
        getData() {
            if (this.mdl.otherFields) {
                this.mdl.otherFields = this.mdl.otherFields.join(",");
            }
            return this.mdl;
        },
    }
}
</script>

<style scoped>
.renderConfig_user >>> .ant-form-item {
    margin-bottom: 10px !important;
}

.user-img {
    display: flex;
}

.user-img-center {
    position: relative;
    display: flex;
    height: 32px;
    border: 1px solid rgba(232, 232, 232, 1);
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
}

.user-img-center:hover {
    border: 1px solid rgba(66, 133, 244, 1);
}

.user-img-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    margin-right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-img-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-img-Selected {
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 10px;
    width: 10px;
    border: 10px solid;
    border-color: #4285f4 #4285f4 transparent transparent;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
}

.user-img-Selected i {
    display: block;
    margin-top: -11px;
    margin-right: -7px
}

.user-back {
    display: flex;
    width: 100%;
}

.user-back-common i {
    color: white;
}

.user-back-common {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 31px;
}

.user-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #4285F4;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 26px;
}
</style>